<template>
  <div>
    <div class="section">
        <div v-for="item in list" :key="item.id" v-show="index == item.id">
            <div style="font-size:150px;">{{item.year}}</div>
            <div style="font-size:30px;">{{item.text}}</div> 
        </div>
    </div>
    <div class="step">
        <div v-for="item in list" :key="item.id" class="stepItem">
            <div style="margin-left: 40%;width:10px;height:10px;border-radius: 50%;padding: 0 auto;margin-bottom: 20%;" class="icon" :class="{'iconIndex':index==item.id}" ></div>
            <div style="font-size:24px" @mouseover="handleMouseover(item.id)" :class="{'active':index==item.id}">{{item.year}}</div>
        </div>
    </div>
    <hr class="line" />
    <div class="buttonClass">
        <el-button icon="el-icon-arrow-left" circle @click="handleMin"></el-button>
        <el-button icon="el-icon-arrow-right" circle @click="handleAdd"></el-button>
    </div>
    </div>
</template>

<script>
export default {
    methods:{
        handleMouseover(index){
            // console.log(index)
            this.index = index
        },
        handleMin(){
            if(this.index == 1) return
            this.index--
        },
        handleAdd(){
            if(this.index == this.list.length) return
            this.index++
        }
    },
    data(){
        return{
            index:1,
            activeIndex:1,
            list:[
                {
                    id:1,
                    year:2008,
                    text:'2008获得了大奖获得了大奖获得了大奖获得了大奖获得了大奖获得了大奖获得了大奖'
                },
                {
                    id:2,
                    year:2009,
                    text:'2009获得了大奖获得了大奖获得了大奖获得了大奖获得了大奖获得了大奖获得了大奖'
                },
                {
                    id:3,
                    year:2010,
                    text:'2010获得了大奖获得了大奖获得了大奖获得了大奖获得了大奖获得了大奖获得了大奖'
                },
                {
                    id:4,
                    year:2011,
                    text:'得了大奖获得了大奖获得了大奖获得了大奖获得了大奖'
                },
                {
                    id:5,
                    year:2012,
                    text:'获得了大奖获得了大奖获得了大奖获得了大奖获得了大奖'
                },
                {
                    id:6,
                    year:2013,
                    text:'奖获得了大奖获得了大奖获得了大奖'
                },
                {
                    id:7,
                    year:2014,
                    text:'获得了大奖获得得了大奖获得了大奖获得了大奖'
                },
                {
                    id:8,
                    year:2015,
                    text:'获得了了大奖获得了大奖获得了大奖获得了大奖'
                },
                {
                    id:9,
                    year:2016,
                    text:'获得了大奖获得了大奖获得了大奖获得了大奖获得了大奖获得了大奖获得了大奖'
                }
            ]
        }
    }
}
</script>

<style scoped>
    .step{
        display: flex;
        justify-content: center;
    }
    .stepItem{
        margin-left: 3%;
    }
    .section{
        margin-bottom: 7%;
    }
    .icon{
        background-color: #000;
    }
    .active{
        color:orange;
    }
    .iconIndex{
        background-color: orange;
    }
    .buttonClass{
        display: flex;
        justify-content: space-between;
        transform: translateY(-300px);
    }
    .line{
        display: block;
        z-index:-999;
        transform: translateY(-60px);
    }
</style>